<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const dataList = ref([]);
const currentPage = ref(1);
const hasMore = ref(true);
const isLoading = ref(false);
const isRefreshing = ref(false);
const startY = ref(0);
const pullDistance = ref(0);

// 初始化加载
onMounted(() => {
  loadData();
});

// 模拟数据请求
const fetchData = async (page,pageSize) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Array.from({ length: pageSize }, (_, i) => ({
        id: page * pageSize + i,
        content: `内容 ${page * pageSize + i}`
      })));
    }, 1000);
  });
};

// 加载数据（分页）
const loadData = async () => {
  if (isLoading.value || !hasMore.value) return;

  isLoading.value = true;
  try {
    const newData = await fetchData(currentPage.value-1,8);
    if (isRefreshing.value) {
      dataList.value = newData;
    } else {
      dataList.value = [...dataList.value, ...newData];
    }
    hasMore.value = newData.length >= 8;
    console.log(hasMore.value)
    currentPage.value++;
  } finally {
    isLoading.value = false;
    isRefreshing.value = false;
    pullDistance.value = 0;
  }
};

// 触摸事件处理
const handleTouchStart = (e) => {
  startY.value = e.touches[0].clientY;
};

const handleTouchMove = (e) => {
  if (window.scrollY > 0) return; // 当页面不在顶部时不触发

  const currentY = e.touches[0].clientY;
  const distance = currentY - startY.value;

  if (distance > 0) {
    e.preventDefault(); // 阻止默认滚动
    pullDistance.value = Math.min(distance, 150);
  }
};

const handleTouchEnd = () => {
  if (pullDistance.value > 80) {
    isRefreshing.value = true;
    currentPage.value = 1;
    hasMore.value = true;
    loadData();
  } else {
    pullDistance.value = 0;
  }
};

// 滚动分页处理
const handleScroll = (e) => {
  const { scrollTop, clientHeight, scrollHeight } = e.target;
  if (scrollHeight - (scrollTop + clientHeight) < 50 && !isLoading.value) {
    loadData();
  }
};
</script>
<template>
  <div class="container"
       @touchstart="handleTouchStart"
       @touchmove="handleTouchMove"
       @touchend="handleTouchEnd"
       @scroll.passive="handleScroll">
    <!-- 数据列表 -->
    <div class="content" :style="{ transform: `translateY(${isRefreshing ? 80 : 0}px)` }">
      <div v-for="item in dataList" :key="item.id" class="item">
        {{ item.content }}
      </div>
    </div>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-if="!hasMore" class="no-more">没有更多数据了</div>
  </div>
</template>
<style scoped>
.container {
  height: 100vh;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.refresh-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  transition: transform 0.3s;
}

.content {
  padding-top: 80px;
  transition: transform 0.3s;
}

.item {
  display: inline-block;
  width: 440px;
  padding: 20px;
  height: 230px;
  border: 1px solid #eee;
}

.loading, .no-more {
  padding: 30px;
  text-align: center;
  color: #999;
}
</style>
